<template>
  <page-container scrollY>
    <!-- 数据汇总 -->
    <data-summary :countInfo="summaryList"></data-summary>

    <!-- 日汇总 -->
    <dayliy-summary
      :total="total"
      :loading="loading"
      :dateRange="dateRange"
      :dayCountList="dayliyList"
      @changeDate="changeDate"
      @changeType="changeType"
      @changeChannel="changeChannel">
    </dayliy-summary>
  </page-container>
</template>

<script>
import DataSummary from './components/data-summary.vue'
import DayliySummary from './components/dayliy-summary.vue'
import { queryDataBoardList } from '@/api/databoard'

export default {
  components: {
    DataSummary,
    DayliySummary,
  },
  data() {
    return {
      total: 1,
      loading: false,
      dataType: '',
      channel: '',
      countInfo: {},
      summaryList: [],
      dayliyList: [],
      dateRange: [this.$startStamp(new Date()), this.$endStamp(new Date())],
    }
  },
  methods: {
    // 改变日期
    async changeDate(value) {
      this.dateRange = value
      await this.queryData()
    },
    async changeType(value) {
      this.dataType = value
      await this.queryData()
    },
    async changeChannel(value) {
      this.channel = value
      await this.queryData()
    },
    // 查询数据
    async queryData() {
      this.loading = true
      let [start, end] = this.dateRange
      start = this.$dayjs(this.$startStamp(start)).unix()
      end = this.$dayjs(this.$endStamp(end)).unix()
      const parms = {
        start,
        end,
        channel: this.channel,
        type: this.dataType,
      }
      const { data } = await queryDataBoardList(parms)

      this.countInfo = data ?? {}
      this.total = data?.total
      this.dayliyList = data?.list ?? []
      this.summaryList = data?.summary ?? []
      this.loading = false
    },
  },
  mounted() {
    this.queryData()
  },
}
</script>

<style lang="scss" scoped></style>
